<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.Id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="140px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="点位名称" prop="dwmc" required >
						<el-input v-model="dataForm.dwmc" placeholder="请输入点位名称" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="ssbm" required >
						<el-select filterable v-model="dataForm.ssbm" placeholder="请选择所属部门" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="点位编号" prop="dwbh" required >
						<el-input v-model="dataForm.dwbh" placeholder="请输入点位编号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="区域" prop="sbhwxymc" required >
						<el-select filterable v-model="dataForm.sbhwxymc" placeholder="请选择区域" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sbhwxymcOptions" :key="index" :label="item.MC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="巡检项及标准" prop="xjxjbz" required >
						<el-select filterable v-model="dataForm.xjxjbz" placeholder="请选择巡检项及标准" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in xjxjbzOptions" :key="index" :label="item.xmmc" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="坐标" prop="zb" required >
						<el-input v-model="dataForm.zb" placeholder="请输入坐标" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				
				<el-col :span="12">
					<el-form label-width="140px">
					<el-form-item label="二维码内容" v-if="!isDetail">

						<el-button  type="primary" @click="getQRimg">点击查看二维码</el-button>
					</el-form-item>
					<el-form-item label="二维码图像">
						<div id="qrcode" ref="qrCode"></div>
						<p style="color:#666">使用微信扫一扫</p>
					</el-form-item>
					</el-form>
               </el-col>

				<el-col :span="12" v-if="false" >
					<el-form-item label="添加时间" prop="addtime" >
						<el-input v-model="dataForm.addtime" placeholder="系统自动生成" readonly >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="false" >
					<el-form-item label="添加人" prop="adduser" >
						<el-input v-model="dataForm.adduser" placeholder="系统自动生成" readonly >
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import QRCode from 'qrcodejs2'
export default {
    data() {
      return {
		qrcode: '',
        visible: false,
        isDetail: false,
        dataForm: {
					dwmc:undefined,
					ssbm:undefined,
					dwbh:undefined,
					sbhwxymc:undefined,
					xjxjbz:undefined,
					zb:undefined,
					rwm:undefined,
					addtime:undefined,
					adduser:undefined,

        },
        rules: {
						dwmc:[
						{
							required:true,
							message:'请输入点位名称',
							trigger:'blur'
						},
						],
						ssbm:[
						{
							required:true,
							message:'请输入所属部门',
							trigger:'blur'
						},
						],
						dwbh:[
						{
							required:true,
							message:'请输入点位编号',
							trigger:'blur'
						},
						],
						sbhwxymc:[
						{
							required:true,
							message:'请输入区域',
							trigger:'blur'
						},
						],
						xjxjbz:[
						{
							required:true,
							message:'请输入巡检项及标准',
							trigger:'blur'
						},
						],
						zb:[
						{
							required:true,
							message:'请输入坐标',
							trigger:'blur'
						},
						],

        },
				ssbmOptions:[],
				sbhwxymcOptions:[],
				xjxjbzOptions:[],


      }
    },
    created() {
		let _this=this;
		this.getSsbmOptions();
		this.getSbhwxymcOptions();
		this.getXjxjbzOptions();

		setTimeout(function(){
			// console.log(_this.dataForm)
            _this.getQRcode();
		},1000)

    },
	mounted(){

		// console.log(this.dataForm)
	},
	beforeUpdate(){
		// console.log(this.dataForm)
	},
    methods: {

    getQRcode(){
		if(this.dataForm.Id !=null){
         let qrcode = new QRCode(this.$refs.qrCode, {
			width: 265,
			height: 265, // 高度
			text: this.dataForm.dwmc, // 二维码内容
			// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
			// background: '#f0f'
			// foreground: '#ff0'
			correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
		 })

		qrcode.clear();
		qrcode.makeCode('点位名称:'+this.dataForm.dwmc+','+'点位编号:'+this.dataForm.dwbh);

		}

	},
   
	getQRimg() {
      if (this.dataForm.dwmc ==undefined || this.dataForm.dwbh ==undefined) {
		  this.$message('点位名称或点位编号不能为空');
          return
      }

	  new QRCode(document.getElementById('qrcode'), 'your content');

      this.$refs.qrCode.innerHTML = "";
      let qrcode = new QRCode(this.$refs.qrCode, {
        width: 265,
        height: 265, // 高度
        text: this.dataForm.dwmc, // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
        correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      })

	  qrcode.clear();
      qrcode.makeCode('点位名称:'+this.dataForm.dwmc+','+'点位编号:'+this.dataForm.dwbh);

    },

		getSsbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.ssbmOptions = res.data
			})
		},
		getSbhwxymcOptions()
		{
			previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
				this.sbhwxymcOptions = res.data
			})
		},
		getXjxjbzOptions()
		{
			previewDataInterface('aa9198848eb44bd3b86d185eb72a8967').then(res => {
				this.xjxjbzOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/XXDWSZXX/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data.list[0];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {

            if (!this.dataForm.Id) {
              request({
                url: '/api/System/XXDWSZXX',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/XXDWSZXX/' + this.dataForm.Id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>